<script>
  import { ref } from 'vue';
  import cardDemo from "/src/components/cardDemo.vue"
  import img1 from "/src/assets/avatar.jpg"
  import icon from "/src/assets/icon.png"
  import axios from "axios";
  import {ElMessage} from "element-plus";
  export default {
    name:'MainPage',
    components:{cardDemo},
    mounted(){
      this.input = this.$route.query.id;
      const userData = JSON.parse(sessionStorage.getItem('token'));
      this.token = userData.token;
      axios.defaults.headers.common['Authorization'] = `${this.token}`;
      this.userID = userData.userID;
      // 获取搜索结果文章列表
      const response = axios.get('http://localhost:8080/search/global/'+this.$route.query.id);
      response.then((result) => {
        this.passageList = result.data.Adopt;
        console.log(this.passageList)
      })

      const response_1 = axios.get('http://localhost:8080/users/'+this.userID);
      response_1.then((result) => {
        // 这里的result就是Promise被解决后的返回值，也就是[[PromiseResult]]对应的值
        this.avatar = result.data.ProfilePhoto;
      }).catch((error) => {
        console.log(error);
      });

    },
    data(){
      return {
        img1,icon,
        input:ref(''),
        passageList:ref([]),
        avatar:ref(null),
        token:ref(null),
        userID:ref(null)
      }
    },
    methods:{
      // 头像点击
      avaClick(){
        this.$router.push({path:'/UserPage',query:{id:this.userID}})
      },
      discoverClick(){
        this.$router.push({path:'/MainPage'})
      },
      adoptClick(){
        this.$router.push({path:'/AdoptPage'})
      },
      msgClick(){
        this.$router.push({path:'/Message/like'})
      },
      postClick(){
        this.$router.push({path:'/PostPage'})
      },
      generalClick(){
        this.$router.push({path:'/SearchPage/general',query:{id:this.$route.query.id}})
      },
      userClick(){
        this.$router.push({path:'/SearchPage/user',query:{id:this.$route.query.id}})
      },
      // 搜索点击
      searchClick(){
        if(this.input === ''){
          ElMessage({
            message: '请输入搜索关键字',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55,
            duration:1200
          })
        }
        else{
          this.$router.push({path:'/SearchPage/adopt',query:{id:this.input}})
          setTimeout(()=>{
            location.reload()
          },100)
        }
      },
    }
  }
</script>

<template>
    <div class="layout" style="height:100vh;">
      <el-container >
            <el-header class="header" >
              <el-row
                  justify="space-between"
                  style="padding-top: 10px;padding-bottom: 10px">

                <!--头像-->
                <img :src="icon"
                     style="width:55px;height:55px;"
                     alt=""/>

                <div class="InputContainer">
                  <input @keyup.enter="searchClick" type="text" name="text" v-model="this.input" class="input" id="input" placeholder="发现更多……" autocomplete="off">
                  <button class="searchBut" @click="searchClick"><svg viewBox="0 0 530 530" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg>
                  </button>
                </div>

                <el-avatar
                    :class="'avatar'"
                    :src="this.avatar"
                    :fit="'cover'"
                    :shape="'circle'"
                    :size="55"
                    @click="avaClick"
                />
              </el-row>
            </el-header>

            <el-container>
                <el-aside>
                    <el-menu
                        active-text-color="#FFD466"
                    >
                      <el-menu-item class="aside" index="1" @click="discoverClick">
                        <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
                        <span>发现</span>
                      </el-menu-item>
                      <el-menu-item class="aside" index="2" @click="adoptClick">
                        <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
                        <span>领养</span>
                      </el-menu-item>
                      <el-menu-item class="aside" index="3" @click="msgClick">
                        <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
                        <span>消息</span>
                      </el-menu-item>
                      <el-menu-item class="aside" index="4" @click="postClick">
                        <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
                        <span>发布</span>
                      </el-menu-item>
                    </el-menu>
                </el-aside>


              <el-container>
                <el-header style="height:40px;">
                  <el-menu
                    default-active="2"
                    style="display: flex;justify-content: center;height:40px;"
                    active-text-color="#FFD466"
                    mode="horizontal"
                  >
                    <el-menu-item class="chose" index="1" style="margin-right:15px" @click="generalClick">综合</el-menu-item>
                    <el-menu-item class="chose" index="2" style="margin-right:15px" @click="adoptClick_1">领养</el-menu-item>
                    <el-menu-item class="chose" index="3" @click="userClick">用户</el-menu-item>
                  </el-menu>
                </el-header>

                <el-main  class="mainPage">
                  <el-row style="justify-content:start;margin-left:45px;gap:15px;">
                    <cardDemo
                        v-for="passage in passageList"
                        :key="passage.PassageID"
                        :passage="passage"
                        :token="this.token"
                        :deleteAble="false"
                    />
                  </el-row>

                </el-main>
              </el-container>
            </el-container>


      </el-container>
    </div>
</template>


<style scoped>
.el-menu{
  border:0!important;
}

.chose{
  font-size:18px;
  font-weight:bold;
}
::v-deep(.chose:hover){
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}

.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}
/*header样式*/
.header{
  /*background-color:black;*/
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  margin-bottom:20px;
}

/*搜索框样式*/
.InputContainer {
  height: 40px;
  margin-top:5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding-left: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
}
.input {
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  caret-color: black;
}
.searchIcon {
  margin-top:3px;
  width: 12px;
}
.searchBut {
  padding: 0 15px 0 12px;
  border: none;
  background-color: transparent;
  height: 40px;
  cursor: pointer;
  transition-duration: .3s;
}
.searchBut:hover {
  background-color: #FFE9B2;
  transition-duration: .3s;
}

/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}

.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover){
  background-color: #FFE9B2;
}


/*主页面*/
.mainPage{
  height:50vh;
}

</style>


